<template>
	<view>
		<div id="top">
			<!-- <u-sticky>
				<cx-scan-progress class="p-20" :current="piecesCountProgress.current"
					:total="piecesCountProgress.total" />
			</u-sticky> -->
		</div>
		
		<scroll-view scroll-y refresher-enabled show-scrollbar :refresher-triggered="triggered"
			@refresherrefresh="$u.throttle(onRefresherrefresh, 200)" @scrolltolower='$u.throttle(onScrolltolower,1000)'
			:style="{height: `${screenHeight}px`}">

			<!-- 列表 -->
			<view class="p-l-30 p-r-30">
				<view class="item" v-for="(item, index) in listData" :key="index">
					<view class="name">{{item.code}} / {{item.name}}</view>
					<view class="flex-sb">
						<view class="bill-no">{{item.billNo}}</view>
					</view>
					<view class="c-99 m-t-20">
						<view>颜色：{{item.colorNumber}} / {{item.color}}</view>
						<view class="flex">
							<view class="flex-1">幅宽：{{item.widthValue}}</view>
							<view class="flex-1">克重：{{item.gramWeightValue}}</view>
						</view>
						<view class="flex">
							<view class="flex-1">规格：{{item.spec}}</view>
							<view class="flex-1">款号：{{item.styleNo}}</view>
						</view>
						<view>缸号：{{item.vatNo}}</view>
						<view>仓库：{{item.storeName}}</view>
						<view>备注：{{item.remarks}}</view>
					</view>
					<view class="flex-sb m-t-20 p-t-20 b-t">
						<view @tap="btnSacnLog(item)">
							已采集：{{item.piecesCountProgress.current}} 匹
						</view>
						<view>
							共需：{{item.piecesCountProgress.total}} 匹
						</view>
					</view>
					<view class="flex-sb m-t-6">
						<view @tap="btnSacnLog(item)">
							已采集：{{item.quantityProgress.current}} {{item.quantityProgress.unitName}}
						</view>
						<view>
							共需：{{item.quantityProgress.total}} {{item.quantityProgress.unitName}}
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<view id="bottom" class="bottom p-30 bgc-white">
			<u-button type="primary" @tap="btnScan">开始采集</u-button>
		</view>
		<u-loading-page :loading="pageLoading"></u-loading-page>
	</view>
</template>

<script>
	import {
		listDetailsByBillId,
		getSnScanProgressByBillId
	} from '@/apis/bill/sale-reserve.js'

	export default {
		data() {
			return {
				billId: null,
				isComplete: true,
				piecesCountProgress: {},
				screenHeight: 1000,
				pageLoading: false,
				triggered: false,
				listData: []
			}
		},
		onLoad() {
			const billId = this.$Route.query.billId
			if (billId) {
				this.billId = billId
				this.initData(billId)
			}
		},
		onReady() {
			const sysInfo = uni.getSystemInfoSync()
			uni.createSelectorQuery().in(this).select('#bottom').boundingClientRect(data => {
				const bottomHeight = data.height
				uni.createSelectorQuery().in(this).select('#top').boundingClientRect(data => {
					this.screenHeight = sysInfo.windowHeight - bottomHeight - data.height
				}).exec();
			}).exec();
		},
		methods: {
			btnScan() {
				this.$Router.push({
					path: "/sale/scan",
					query: {
						billId: this.billId
					}
				})
			},
			// 跳转到采集记录
			btnSacnLog(row) {
				const detailId = row.id
				this.$Router.push({
					path: "/scan/list",
					query: {
						detailId
					}
				})
			},
			initData(billId) {
				if (!billId) return
				this.listPage(billId)
				// getSnScanProgressByBillId(billId).then(res => {
				// 	if (!res.data.flag) return
				// 	const data = res.data.data
				// 	this.piecesCountProgress = data.piecesCountProgress
				// 	this.isComplete = data.isComplete
				// })
			},
			tabClick() {},
			listPage(params = this.billId) {
				this.pageLoading = true
				listDetailsByBillId(params).then(res => {
					if (!res.data.flag) {
						uni.showToast({
							icon: 'error',
							title: res.data.message
						})
					}
					const records = res.data.data || []
					this.listData.push(...records)
				}).finally(_ => {
					this.triggered = false
					this.pageLoading = false
				})
			},
			onRefresherrefresh() {
				this.triggered = true
				console.log("onRefresherrefresh")
				this.listData = []
				this.listPage()
			},
			onScrolltolower() {}
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		border-radius: 10rpx;
		background: #fff;
		padding: 30rpx;
		margin-top: 30rpx;

		.name {
			font-size: 40rpx;
		}
	}

	.bottom {
		position: fixed;
		width: 100%;
		box-shadow: 6px 6px 6px 10px rgba(0, 0, 0, .06);
	}
</style>